<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
    <title>首页</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../css/vantindex.css"/>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: center;
            background-color: #444;
        }

        nav a {
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            display: block;
        }

        nav a:hover {
            background-color: #555;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        .content {
            padding: 20px;
            background: white;
            margin-top: 20px;
        }

        .promo, .order-form {
            background-color: #e9e9e9;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
        }

        .promo h2, .order-form h2 {
            margin-top: 0;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            width: 100%;
            bottom: 0;
        }


    </style>
</head>
<body>
<div id="all">
    <van-cell-group>
        <van-nav-bar
                title="欢迎使用开云智能管理系统"


        />

    </van-cell-group>

    <van-tabs v-model="active" style="margin-top: 30px" @change="cofnig(active)">


        <!--       会员开卡 -->
        <van-tab title="会员开卡">

            <div id="creatvip">


                <van-cell-group>
                    <van-field v-model="idname" label="用户小程序ID"/>
                </van-cell-group>
                <van-cell-group>
                    <van-field v-model="phonenumber" label="手机号"/>
                </van-cell-group>
                <van-cell-group>
                    <van-field v-model="carnumber" label="车牌号"/>
                </van-cell-group>
                <div style=" display: flex;
  justify-content: center;">

                    <van-cell-group style="background-color: rgba(74,74,74,0)">
                        <van-button round style=" width: 300px; margin-top: 10px" type="info" @click="showPopup">
                            选择卡券类型
                        </van-button>
                    </van-cell-group>
                </div>


                <van-popup v-model="show" :style="{ borderRadius: '30px' }">
                    <div style="width: 300px; height: 300px; ">

                        <van-radio-group v-model="radio" :style="{borderRadius:'30px',margin:'30px'}">
                            <van-radio name="1">轿车普洗次卡400 12次</van-radio>
                            <van-radio name="2">越野车普洗次卡 500 12次</van-radio>
                            <van-radio name="3">贴膜优惠券 100元</van-radio>
                            <van-radio name="4">夏日畅洗卡188元10次</van-radio>
                            <van-radio name="5">雨季补偿卡</van-radio>
                            <van-radio name="6">通用补偿卡</van-radio>
                            <van-radio name="7">打蜡卷</van-radio>
                            <van-radio name="8">精洗卷</van-radio>
                            <van-radio name="9">微精洗卷</van-radio>
                            <van-radio name="10">保养卷</van-radio>
                            <van-radio name="11">200元储值</van-radio>
                            <van-radio name="12">300元储值</van-radio>
                            <van-radio name="13">400元储值</van-radio>
                        </van-radio-group>
                        <van-cell-group>
                            <van-button round style=" width: 200px;" type="info" @click="showPopupa" :style="{align:'content'}">确定</van-button>


                        </van-cell-group>

                    </div>


                </van-popup>
                <van-dialog v-model="dialogVisible" show-cancel-button>
                    {{ dialogMessage }}
                </van-dialog>

            </div>

        </van-tab>

        <!--       历史消费 -->
        <van-tab title="会员查询">
            <van-cell-group>

                <van-field v-model="cara" placeholder="请输入车牌号或者手机号查询"/>

            </van-cell-group>

            <van-button plain hairline type="primary"
                        style="margin: 15px;width: 355px;align-content: center; margin-left: 15px" @click="selectbyphone">查询
            </van-button>
            <van-cell-group>

                <van-cell
                        v-for="(record, index) in historyRecords"
                        :key="index"
                        :title="record.title"
                        :label="record.description"
                        @click="onRecordClick(record)"
                />
            </van-cell-group>
<!--            <van-cell is-link @click="updatavip">展示弹出层</van-cell>-->
            <van-popup v-model="showa" :style="{ borderRadius: '30px',margin:'15px'  }">

                <p style="text-align:center" >车牌号: {{ cara }}</p>
                <van-cell-group>
                    <van-field v-model="money" label="续费" placeholder="请输入金额" />
                </van-cell-group>
                <van-cell-group>

                    <van-button round type="info" :style="{width : '300px',margin: '20px'}">提交</van-button>
                </van-cell-group>

            </van-popup>

        </van-tab>
        <!--       会员信息 -->
        <van-tab title="会员信息">


            <!--            <van-button plain hairline type="primary" style="margin: 15px;width: 355px;align-content: center; margin-left: 15px" >查询</van-button>-->
            <van-cell-group>

                <van-cell
                        v-for="(record, index) in vipinfo"
                        :key="index"
                        :title="record.title"
                        :label="record.description"
                        @click="onRecordClick(record)"
                />
            </van-cell-group>

        </van-tab>
        <!--       扣费核销 -->
        <van-tab title="扣费核销">

            <table style="align-content: center">

                <van-radio-group v-model="koufeiradio" style="margin: 20px">

                    <van-radio name="1" style="margin: 10px">小车 25</van-radio>
                    <van-radio name="2">越野车 35</van-radio>
                    <van-radio name="3">商务车 45</van-radio>

                </van-radio-group>
                <!--                <van-cell-group>-->
                <!--                    <van-field v-model="koufeiradio" label="金额" placeholder="按金额核销请在输入框中输入金额" />-->
                <!--                </van-cell-group>-->
                <table border="1" style="background-color: rgba(0,0,0,0) ; border: rgba(74,74,74,0)">
                    <tr>
                        <td>
                            <div style="width: 230px;margin-right: 50px">
                                <van-cell-group>
                                    <van-field v-model="hexiaophone" style="margin-right: 30px"
                                               placeholder="请输入车牌号或者电话"/>

                                </van-cell-group>
                            </div>
                        </td>
                        <td>
                            <van-button plain hairline type="primary" @click="hexiao">扣费</van-button>
                        </td>
                    </tr>
                </table>
            </table>

            <!--            <table border="1" style="background-color: rgba(0,0,0,0) ; border: rgba(74,74,74,0)">-->
            <!--                <tr>-->
            <!--                    <td>-->
            <!--                        <div style="width: 230px;margin-right: 50px">-->
            <!--                            <van-cell-group>-->
            <!--                                <van-field v-model="money" style="margin-right: 30px"-->
            <!--                                           placeholder="请输入金额"/>-->

            <!--                            </van-cell-group>-->
            <!--                        </div>-->
            <!--                    </td>-->
            <!--                    <td>-->
            <!--                        <van-button plain hairline type="primary">扣费</van-button>-->
            <!--                    </td>-->
            <!--                </tr>-->
            <!--            </table>-->

        </van-tab>
    </van-tabs>


</div>

<script>


    // import { Toast } from 'vant';

    Vue.use(vant);
    new Vue({

        el: '#all',

        data: {
            active: 3,
            // 会员开卡的对象
            phonenumber: '',
            carnumber: '',
            idname: '',
            show: false,
            radio: '1',
            dialogVisible: false,
            dialogMessage: '会员还未注册',

            //历史消费的对象
            cara: "",
            value: "",
            historyRecords: [
                // {title: '晋AG8D82', description: '余额342元', id: 1},
            ],
            carid: "",
            //会员信息
            vipinfo: [
                {title: '晋AG8D82', description: '余额342元', id: 1},
                {title: '晋A6DG92', description: '余额10元', id: 2},
                {title: '记录3', description: '描述3', id: 3},
            ],
            //核销

            hexiaophone: '',
            koufeiradio: '',
            hxphone: ''
,showa: false,

        },
        methods: {
            onRecordClick(record) {
                // 处理点击事件，比如跳转到详情页
                // window.alert(record.id+this.cara)
                // if (record===6){
                //     window.alert("查询详情")
                // }

                this.showa=true;
                console.log(`点击了记录: ${record.title}`);
            },
            //全局控制
            cofnig(index) {
                // Notify({ type: 'primary', message: index });


                if (index === 2) {
                    axios.get("/selectlogin")
                        .then(response => {
                            if (response.data.code !== 0) {

                                this.vipinfoa()
                            } else {
                                // 失败，显示错误信息
                                location.href = "index.html"
                                console.log(response.data.code);
                                window.alert(response.data.msg);

                                this.dialogVisible = true

                            }
                        })
                        .catch(error => {
                            // 请求失败，显示错误信息
                            // window.alert(error.response ? error.response.data.message : '请求失败');
                            // console.error('请求失败:', error);
                            this.dialogVisible = true

                        });

                } else if (index === 0) {
                    axios.get("/selectlogin")
                        .then(response => {
                            if (response.data.code !== 0) {


                            } else {
                                // 失败，显示错误信息
                                location.href = "index.html"
                                // console.log(response.data.code);
                                // window.alert(response.data.msg);

                                this.dialogVisible = true

                            }
                        })
                        .catch(error => {
                            // 请求失败，显示错误信息
                            // window.alert(error.response ? error.response.data.message : '请求失败');
                            // console.error('请求失败:', error);
                            this.dialogVisible = true

                        });
                } else if (index === 1) {
                    axios.get("/selectlogin")
                        .then(response => {
                            if (response.data.code !== 0) {


                            } else {
                                // 失败，显示错误信息
                                location.href = "index.html"
                                // console.log(response.data.code);
                                // window.alert(response.data.msg);

                                this.dialogVisible = true

                            }
                        })
                        .catch(error => {
                            // 请求失败，显示错误信息
                            // window.alert(error.response ? error.response.data.message : '请求失败');
                            // console.error('请求失败:', error);
                            this.dialogVisible = true

                        });
                } else if (index === 3) {
                    axios.get("/selectlogin")
                        .then(response => {
                            if (response.data.code !== 0) {


                            } else {
                                // 失败，显示错误信息
                                location.href = "index.html"
                                // console.log(response.data.code);
                                // window.alert(response.data.msg);

                                this.dialogVisible = true

                            }
                        })
                        .catch(error => {
                            // 请求失败，显示错误信息
                            // window.alert(error.response ? error.response.data.message : '请求失败');
                            // console.error('请求失败:', error);
                            this.dialogVisible = true

                        });
                }

            },


            selectbyphone() {

                const params = {
                   title: this.cara

                };
                axios.post("/selectbyphone", params)
                    .then(response => {
                        if (response.data.code !== 0) {
                            // 查询成功
                            this.historyRecords = response.data.data
                            this.show = true;
                            // this.showPopupa()

                        } else {
                            // 失败，显示错误信息
                            // location.href="index.html"
                            console.log(response.data.code);
                            // window.alert(response.data.msg);

                            this.dialogVisible = true
                            vant.Toast.fail(response.data.msg);
                            setTimeout(function () {
                                location.reload();
                            }, 1500);
                            console.log(response.data.code);

                        }
                    })
                    .catch(error => {
                        // 请求失败，显示错误信息
                        // window.alert(error.response ? error.response.data.message : '请求失败');
                        // console.error('请求失败:', error);
                        this.dialogVisible = true

                    });

            },


//开卡方法
            //开卡前查询按钮
            showPopup() {

                // this.dialogVisible=true;
                const params = {
                    idname: this.idname,
                    phonenumber: this.phonenumber,
                    carnumber: this.carnumber,
                    card: this.card,
                    id: this.id

                };

                // window.alert(this.phonenumber + this.carnumber)

                axios.post("/vipinfo", params)
                    .then(response => {
                        if (response.data.code !== 0) {
                            // 查询成功

                            this.show = true;
                            // this.showPopupa()

                        } else {
                            // 失败，显示错误信息
                            // location.href="index.html"
                            console.log(response.data.code);
                            // window.alert(response.data.msg);

                            this.dialogVisible = true
                            vant.Toast.fail(response.data.msg);
                            setTimeout(function () {
                                location.reload();
                            }, 1500);
                            console.log(response.data.code);

                        }
                    })
                    .catch(error => {
                        // 请求失败，显示错误信息
                        // window.alert(error.response ? error.response.data.message : '请求失败');
                        // console.error('请求失败:', error);
                        this.dialogVisible = true

                    });
            },

            //开卡按钮
            showPopupa() {
                const params = {
                    idname: this.idname,
                    phonenumber: this.phonenumber,
                    carnumber: this.carnumber,
                    radio: this.radio,
                };

                axios.post("/addcard", params)
                    .then(response => {


                        if (response.data.code === 1) {

                            vant.Toast.success('会员开卡成功');
                            setTimeout(function () {
                                location.reload();
                            }, 1500);

                        } else {
                            // 登录失败，显示错误信息

                            vant.Toast.fail(response.data.msg);
                            setTimeout(function () {
                                location.reload();
                            }, 1500);
                            console.log(response.data.code);
                            // window.alert(response.data.msg);
                            // 关闭loading

                        }
                    })
                    .catch(error => {
                        // 请求失败，显示错误信息
                        window.alert(error.response ? error.response.data.message : '请求失败');
                        console.error('请求失败:', error);

                    });
            },


            //会员信息方法
            vipinfoa() {
                const res = axios.get("/findall")


                res.then(response => {

                    //回调函数

                    if (response.data.msg === "NOTLOGIN") {
                        location.href = "index.html"

                    }


                    if (response.data.code === 1) {

                        this.vipinfo = response.data.data
                    } else {
                        const toast = vant.Toast.loading({
                            duration: 0, // 持续展示 toast
                            forbidClick: true,
                            message: '正在加载',
                        });
                    }


                })
                // 异步操作失败时，执行的回调函数
                res.catch(error => {
                    window.alert(error.data.message)

                    window.alert()
                    console.log('请求失败:' + res.data())
                    // console.log('error:',error)
                    console.log('请求失败响应对象获取', error.response)
                })

            },

            //核销方法

            hexiao() {

                const params = {
                    hexiaophone: this.hexiaophone,
                    koufeiradio: this.koufeiradio
                };
                const res = axios.post("/deduct", params)


                res.then(response => {

                    //回调函数
                    // if (response.data.msg==="NOTLOGIN"){
                    //     location.href="index.html"
                    //
                    // }
                    if (response.data.code === 1) {
                        //提示核销成功
                        vant.Toast.success('扣费成功');
                        setTimeout(function () {
                            location.reload();
                        }, 2000);

                    } else {
                        //失败
                        vant.Toast.fail(response.data.msg);
                        setTimeout(function () {
                            location.reload();
                        }, 1500);
                        console.log(response.data.code);
                    }


                })
                // 异步操作失败时，执行的回调函数
                res.catch(error => {
                    window.alert(error.data.message)

                    window.alert()
                    console.log('请求失败:' + res.data())
                    // console.log('error:',error)
                    console.log('请求失败响应对象获取', error.response)
                })

            },
            updatavip(){

                this.showa=true;
            },
        },

        created
            () {

            axios.get("/selectlogin")
                .then(response => {
                    if (response.data.code !== 0) {


                    } else {
                        // 失败，显示错误信息
                        location.href = "index.html"
                        // console.log(response.data.code);
                        // window.alert(response.data.msg);

                        this.dialogVisible = true

                    }
                })
                .catch(error => {
                    // 请求失败，显示错误信息
                    // window.alert(error.response ? error.response.data.message : '请求失败');
                    // console.error('请求失败:', error);
                    this.dialogVisible = true

                });
        }
    });
</script>

</body>
</html>
